<template>
  <div>
    <!-- 新闻标题头部 -->
    <mt-header class="header" fixed title="新闻头条">
      <router-link to="/home/newlists" slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
    </mt-header>

    <!-- 新闻列表 -->
    <div class="news-box">
        <div class="news" v-for="(item,Index) in newslist" :key="Index">
          <router-link :to="'/home/newinfo/' + item.digest" class="news2" tag="div">
            <div class="news-content">
              <dl>
                <dt>
                  <h3>
                    <span v-if="item.tcount > 2000">头条</span>
                    {{ item.title }}
                  </h3>
                </dt>
                <dd>
                  <span>{{ item.source }}</span>
                  <span>{{ item.ptime | settime }}</span>
                </dd>
              </dl>
            </div>
            <div class="news-img">
              <img :src=" item.picInfo | getimgpath ">
            </div>
          </router-link>
        </div>
    </div>

    <!-- 结束 -->
  </div>
</template>
<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newslist: null
    };
  },
  methods: {
    getnews() {
      //获取新闻列表

      Indicator.open({
        spinnerType: "triple-bounce"
      });
      this.axios
        .get("https://www.apiopen.top/journalismApi")
        .then(response => {
          if (response.data.code == 200) {
            var data = response.data.data;
            var listcount = [].concat(
              data.auto,
              data.dy,
              data.ent,
              data.moneny,
              data.sports,
              data.tech,
              data.toutiao,
              data.war
            );

            listcount = listcount.sort(function() {
              return 0.5 - Math.random(); //打乱
            });

            listcount.forEach((element, Index) => {
              if (element == undefined || element.title == null) {
                listcount.splice(Index, 1);
              }
            });
            this.newslist = listcount;
            Indicator.close();
          } else {
            Indicator.close();
            Toast("网络延迟");
          }
        })
        .catch(function(error) {
          Indicator.close();
        });
    },
    loadTop() {
      // 加载更多数据
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      // 加载更多数据
      this.allLoaded = true; // 若数据已全部获取完毕
      this.$refs.loadmore.onBottomLoaded();
    }
  },
  created() {
    this.getnews();
  },
  filters: {
    getimgpath: function(data) {
      if (data.length > 0) {
        return data[0].url;
      } else {
        return "'./bg.png'";
      }
    },
    settime: function(timedata) {
      if (timedata != null) {
        return timedata.slice(-8);
      } else {
        return null;
      }
    }
  }
};
</script>
<style lang="scss"  scoped>
.header {
  background: #fff;
  box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.05);
  color: #333;
  position: fixed;
  z-index: 300;
  .mint-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    font-weight: 400;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 1rem;
  }
}

.news-box {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 40px;
  position: relative;
  z-index: 200;
  p {
    width: 100%;
    background: #fff;
    color: #999;
    font-size: 0.3rem;
    padding: 10px 0;
    text-align: center;
  }
  .news {
    width: 95%;
    margin: 0 auto;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
    .news2 {
      display: flex;
      justify-content: space-between;
      .news-content {
        width: 60%;
        dl {
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          align-content: stretch;
          dt {
            font-size: 1rem;
            color: #333;
            span {
              font-size: 0.5rem;
              background: #ffcc00;
              padding: 0 3px;
              border-radius: 3px;
              color: #010101;
              margin-right: 5px;
            }
            h3 {
              font-size: 0.95rem;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              color: #1e1e1e;
              line-height: 1.5em;
            }
          }
        }
        dd {
          width: 100%;
          padding-top: 10px;
          display: flex;
          justify-content: space-between;
          color: rgb(190, 190, 190);
          display: flex;
          justify-content: space-between;
          span {
            width: 40%;
            display: block;
            font-size: 0.5rem;
            &:nth-of-type(1) {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
            }
            &:nth-of-type(2) {
              text-align: center;
            }
          }
        }
      }
      .news-img {
        width: 30%;
        height: 75px;
        overflow: hidden;
        border-radius: 5%;
        img {
          width: 100%;
          height: 100%;
          border: none;
        }
      }
    }
  }
}
</style>
